<template>
  <div>
    <el-dialog
      v-if="dialogVisible"
      :title="$t('orderinformation')"
      :visible.sync="dialogVisible"
      width="700px"
    >
      <div v-loading="loading">
        <div v-if="orderDatalist" class="description">
          <div class="title">{{ $t("userinformation") }}</div>
          <div class="acea-row">
            <div class="description-term">
              {{ $t("usernickname") }}：{{ orderDatalist.user.nickname }}
            </div>
            <div class="description-term">
              {{ $t("consignee") }}：{{ orderDatalist.real_name }}
            </div>
            <div class="description-term">
              {{ $t("contactnumber") }}：{{ orderDatalist.user_phone }}
            </div>
            <div class="description-term">
              {{ $t("Ship.To.Address") }}：{{ orderDatalist.user_address }}
            </div>
          </div>
          <el-divider />
          <div class="title">{{ $t("receivinginformation") }}</div>
          <div class="acea-row">
            <div class="description-term">
              {{ $t("orderno") }}：{{ orderDatalist.order_sn }}
            </div>
            <div v-if="orderDatalist.order_type === 0" class="description-term">
              {{ $t("orderstatus") }}：{{
                orderDatalist.status | orderStatusFilter
              }}
            </div>
            <div v-else class="description-term">
              {{ $t("orderstatus") }}：{{
                orderDatalist.status | cancelOrderStatusFilter
              }}
            </div>
            <div class="description-term">
              {{ $t("totalnumberofgoods") }}：{{ orderDatalist.total_num }}
            </div>
            <div class="description-term">
              {{ $t("totalorderprice") }}：{{ orderDatalist.total_price }}
            </div>
            <div class="description-term">
              {{ $t("Delivery.postage") }}：{{ orderDatalist.pay_postage }}
            </div>
            <div class="description-term">
              {{ $t("Coupon.amount") }}：{{ orderDatalist.coupon_price }}
            </div>
            <div class="description-term">
              {{ $t("Actual.payment") }}：{{
                orderDatalist.finalOrder
                  ? parseFloat(orderDatalist.finalOrder.pay_price) +
                    parseFloat(orderDatalist.pay_price)
                  : orderDatalist.pay_price
              }}
            </div>
            <div v-if="orderDatalist.integral > 0" class="description-term">
              {{ $t("Point.deduction") }} {{ orderDatalist.integral }}
              {{ $t("Deducted") }} {{ orderDatalist.integral_price }}$
            </div>
            <div
              v-if="orderDatalist.give_integral > 0"
              class="description-term"
            >
              {{ $t("Bonus.points") }}：{{ orderDatalist.give_integral }}
            </div>
            <div class="description-term">
              {{ $t("creationtime") }}：{{ orderDatalist.create_time }}
            </div>
            <div class="description-term">
              {{ $t("Payment.method") }}：{{
                orderDatalist.pay_type | payTypeFilter
              }}
            </div>
            <div class="description-term">
              {{ $t("First.commission") }}：{{
                parseFloat(orderDatalist.extension_one) +
                  parseFloat(orderDatalist.refund_extension_one)
              }}
              <em
                v-if="orderDatalist.refund_extension_one > 0"
                style="color: red; font-style: normal"
                >(-{{ orderDatalist.refund_extension_one }})</em
              >
            </div>
            <div class="description-term">
              {{ $t("Second.commission") }}：{{
                parseFloat(orderDatalist.extension_two) +
                  parseFloat(orderDatalist.refund_extension_two)
              }}
              <em
                v-if="orderDatalist.refund_extension_two > 0"
                style="color: red; font-style: normal"
                >(-{{ orderDatalist.refund_extension_two }})</em
              >
            </div>
            <div class="description-term">
              {{ $t("merchantremarks") }}：{{ orderDatalist.remark }}
            </div>
          </div>
          <!-- <template
            v-if="
              orderDatalist.delivery_type === '1' ||
                orderDatalist.delivery_type === '4'
            "
          >
            <el-divider />
            <div class="title">{{ $t("logisticsinformation") }}</div>
            <div class="acea-row">
              <div class="description-term">
                {{ $t("courierservices") }}：{{ orderDatalist.delivery_name }}
              </div>
              <div class="description-term">
                {{ $t("couriernumber") }}：{{ orderDatalist.delivery_id }}
                <el-button
                  type="primary"
                  size="mini"
                  style="margin-left: 5px"
                  @click="openLogistics"
                  >{{ $t("logisticsquery") }}</el-button
                >
              </div>
            </div>
          </template> -->
          <template v-if="orderDatalist.delivery_type === '2'">
            <el-divider />
            <div class="title">{{ $t("shippinginformation") }}</div>
            <div class="acea-row">
              <div class="description-term">
                {{ $t("shippersname") }}：{{ orderDatalist.delivery_name }}
              </div>
              <div class="description-term">
                {{ shipperstelephone }}：{{ orderDatalist.delivery_id }}
              </div>
            </div>
          </template>
          <template v-if="orderDatalist.mark">
            <el-divider />
            <div class="title">{{ $t("usernotes") }}</div>
            <div class="acea-row">
              <div class="description-term">{{ orderDatalist.mark }}</div>
            </div>
          </template>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :title="$t('logisticsquery')"
      :visible.sync="dialogLogistics"
      width="350px"
      :before-close="handleClose"
    >
      <logistics-from
        v-if="orderDatalist"
        :order-datalist="orderDatalist"
        :result="result"
      />
      <!-- <el-button
        v-if="orderDatalist.status ==1"
        type="primary"
        size="mini"
        style="margin-left: 5px"
        @click="addwuliu"
        >{{ $t("addlogistics") }}</el-button
      > -->
    </el-dialog>
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import {
  getExpress,
  orderDetailApi,
  addExpressApi,
  editExpressApi
} from "@/api/order";
import logisticsFrom from "./logistics";
export default {
  name: "OrderDetail",
  components: { logisticsFrom },
  data() {
    return {
      dialogVisible: false,
      dialogLogistics: false,
      loading: false,
      result: [],
      orderDatalist: null
    };
  },
  methods: {
    onOrderDetails(id) {
      this.loading = true;
      orderDetailApi(id)
        .then(res => {
          this.orderDatalist = res.data;
          this.loading = false;
        })
        .catch(({ message }) => {
          this.loading = false;
          this.$message.error(message);
        });
    },
    openLogistics() {
      this.getOrderData();
      this.dialogLogistics = true;
    },
    handleClose() {
      this.dialogLogistics = false;
    },
    // 获取订单物流信息
    getOrderData() {
      getExpress(this.orderDatalist.order_id)
        .then(async res => {
          this.result = res.data;
        })
        .catch(res => {
          this.$message.error(res.message);
        });
    },
    addwuliu() {
      this.$modalForm(addExpressApi(this.orderDatalist.order_id)).then(() =>
        this.getOrderData()
      );
    }
  }
};
</script>

<style scoped lang="scss">
.title {
  margin-bottom: 16px;
  color: #17233d;
  font-weight: 500;
  font-size: 14px;
}
.description {
  &-term {
    display: table-cell;
    padding-bottom: 10px;
    line-height: 20px;
    width: 50%;
    font-size: 12px;
  }
}
</style>
